@import '../../theme/style/variables.module.less';

.container {
    z-index: @mi-zindex + 100;

    :global(.ant-popover) {
        &-content,
        &-inner {
            background: var(--mi-palette-background);
            .frosted();
            .border(var(--mi-palette-border));
            .radius(16);
            .properties(min-width, 160);
            max-height: calc(100vh - 10rem);
        }

        &-arrow {
            &:before {
                background: var(--mi-palette-background);
            }
        }
    }

    .customize {
        width: 100%;
        position: relative;

        :global {
            .vc-colorpicker {
                background-color: transparent;
                box-shadow: none;
            }

            .vc-saturation__chrome {
                margin-bottom: 0;
            }

            .chrome-controls .chrome-sliders {
                .properties(margin-left, 6);
                .properties(margin-top, 10);
            }

            .vc-alpha-slider {
                display: none;
            }

            .vc-display {
                .vc-input-toggle,
                .vc-alpha-input {
                    display: none;
                }

                .vc-color-input {
                    background: var(--mi-palette-background);
                    border: .0625rem solid var(--mi-palette-border);

                    input {
                        color: var(--mi-palette-text);
                        .properties(height, 28);
                    }
                }

                .vc-current-color {
                    .properties(width, 60);
                }
            }
        }
    }

    .btn {
        .flex();
        .properties(margin-top);

        > button {
            border: solid .0625rem var(--mi-palette-btn-border);
            color: var(--mi-palette-btn-text);

            &:last-child {
                .properties(margin-left, 16);
                color: var(--mi-palette-btn-save-color);
                .gradient-hint(var(--mi-palette-btn-save-start), var(--mi-palette-btn-save-hint), var(--mi-palette-btn-save-stop));
            }
        }
    }

    .switch {
        .flex();
        .properties(margin-top);
    }
}

:export {
    --palette-text: var(--mi-on-surface-variant);
    --palette-background: var(--mi-surface-variant);
    --palette-border: var(--mi-surface-variant);
    --palette-btn-border: rgba(var(--mi-rgb-on-surface-variant), 0.5);
    --palette-btn-text: var(--mi-on-surface-variant);
    --palette-btn-save-color: var(--mi-on-primary);
    --palette-btn-save-start: var(--mi-primary);
    --palette-btn-save-hint: var(--mi-secondary);
    --palette-btn-save-stop: var(--mi-tertiary);
}